<template>
    <div>
        <div class="home">
            <div class="header">
                <div class="type-wrap" @click="changeType">
                    <span class="title">{{currentType.name || '全部类型'}}</span>
                    <van-icon name="list-switching" size="22" />
                </div>
                <div class="data-wrap" @click="changeTime">
                    <span class="time">
                        {{ currentTime[0] }}年{{ currentTime[1] }}月
                        <van-icon class="arrow" name="play" />
                    </span>
                    <span class="expense">总支出${{billData.totalExpense}}</span>
                    <span class="income">总收入${{billData.totalIncome}}</span>
                </div>
            </div>
            <div class="content">
                <van-pull-refresh v-model="refresh_loading" success-text="刷新成功" @refresh="onRefresh">
                    <van-list
                        v-model:loading="loadingMore"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        offset="0"
                        >
                        <CardItem class="card-item" :billData="billData" :currentType="currentType"   />
                        <!-- <CardItem class="card-item" :billData="billData" :currentType="currentType"  v-for="(item,index) in billData.list" :key="index" /> -->
                    </van-list>
                </van-pull-refresh>
            </div>
            <div class="save">
                <van-icon name="records-o" size="20px" @click="()=>PopAddRef.show = true"/>
                <span >记一笔</span>
            </div>
        </div>
    </div>
    <PopType ref="PopTypeRef" @changeName="changeName" />
    <PopTime ref="PopTimeRef" @selectTime="selectTime" />
    <PopAdd ref="PopAddRef" @onRefresh="onRefresh()"/>
</template>

<script setup>
import PopType from '@/components/PopType.vue';
import PopTime from '@/components/PopTime.vue';
import PopAdd from '@/components/PopAdd.vue';
import formateDate from '@/utils/date.js';
import CardItem from '@/components/CardItem.vue';
import axios from '@/api/index.js';
import { reactive, ref } from 'vue';
import { showToast } from 'vant';


//类型弹出框
const PopTypeRef = ref(null);
//时间弹出框
const PopTimeRef = ref(null);
//类型
const currentType = ref('');
//选择的时间
const currentTime = ref(formateDate(new Date()).slice(0,2))
//控制下拉刷新展示
const refresh_loading = ref(false);
//上拉加载更多
const loadingMore = ref(false);

const PopAddRef = ref()
//账单列表
const billData = reactive({
    list: [],
    totalExpense: 0,
    totalIncome: 0,
    totalPage:0
})
//列表数据是否加载完毕
const finished = ref(false);
const page = ref(1)


// 请求账单数据
const getBillList = async () => {
    //await xxx , 在 xxx 执行完成之后会修改默认状态为成功状态resolve
    const { data } = await axios.get(`/api/bill/list?date=${currentTime.value.join('-')}&type_id=${currentType.value.id || 'all'}&page=${page.value}&size=5`)
    //console.log(data);
    //billData.value = data
    billData.list = [...billData.list, ...data.list]
    billData.totalExpense = data.totalExpense
    billData.totalIncome = data.totalIncome
    billData.totalPage = data.totalPage
    //console.log(billData.value);

    // 当数据加载完毕之后，将finished.value = true
    if (page.value >= billData.totalPage) { //已经拿完了所有数据
        finished.value = true;
    }

}

//list列表加载时
const onLoad = async() => {
    
    if (!refresh_loading.value && page.value < billData.totalPage){
        page.value ++
    }
    //console.log('onLoad',page.value,billData.totalPage);
    await getBillList()
    
    loadingMore.value = false;
};

const onRefresh = async() => {
    page.value = 1
    billData.list = []
    refresh_loading.value = true;
    refresh_loading.value = true;
    await onLoad()
    showToast('刷新成功')
    refresh_loading.value = false;
    finished.value = false;
};

const changeType = () => {
    //console.log('changeType');
    PopTypeRef.value.show = "ture"
}
const changeName = async(e) => {
    console.log(e);
    currentType.value = e
    onRefresh()
}

const changeTime = () => {
    PopTimeRef.value.show = true
}

const selectTime = async(e) => {
    console.log(e);
    currentTime.value = e
    onRefresh()
    //PopTimeRef.value.show = true
    finished.value = false;
}



</script>

<style lang="less" scoped>
.home {
    .header {
        background-color: rgb(55, 170, 97);
        height: 150px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        font-size: 18px;
        color: #fff;

        .type-wrap {
            background-color: rgb(70, 177, 133);
            padding: 6px;
            border-radius: 4px;
            display: flex;
            align-items: center;

            .title {
                padding-right: 10px;
                margin-right: 10px;
                border-right: 1px solid rgb(94, 196, 136);
            }
        }

        .data-wrap {
            margin-top: 10px;
            font-size: 14px;

            .time {
                margin-right: 10px;

                .arrow {
                    transform: rotate(90deg);
                }
            }

            .expense {
                margin-right: 10px;
            }
        }
    }

    .content {
        height: calc(100vh - 240px);
        overflow-y: scroll;
        padding: 10px;
        background-color: rgb(239, 237, 237);

        .card-item {
            margin-top: 10px;
            border-radius: 10px;
            overflow: hidden;
        }

        .card-item:first-child {
            margin-top: 0;
        }
    }

    .save {
        position: fixed;
        width: 80px;
        height: 40px;
        bottom: 80px;
        right: 20px;
        border-radius: 100px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        color: #37a762;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>